@charset "utf-8";
.com-switch {
  display: inline-block;
}
.com-switch label {
  display: inline-block;
  cursor: pointer;
}
.com-switch label input[type='checkbox'] {
  display: none;
}
.com-switch label .com-style {
  display: inline-block;
  position: relative;
  min-width: 50px;
  height: 23px;
  line-height: 23px;
  border-radius: 12px;
  background-color: #ccc;
  padding-left: 24px;
  padding-right: 8px;
  color: #fff;
  font-size: 14px;
}
.com-switch label .com-style:after {
  content: "";
  position: absolute;
  top: 2.5px;
  left: 3px;
  border-radius: 100%;
  -webkit-transition: all .3s;
  transition: all .3s;
  width: 18px;
  height: 18px;
  background-color: #fff;
}
.com-switch .box-add i {
  padding-left: 7px;
  padding-right: 26px;
  background-color: #20a0ff;
}
.com-switch .box-add i:after {
  left: 100%;
  margin-left: -20px;
}
